<template>
    <div>
        <el-row class="tac">
            <el-menu router
                default-active="2"
                class="el-menu-vertical-demo"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b"
                @open="handleOpen"
                @close="handleClose">
                <el-menu-item index="/index">
                    <i class="el-icon-location"></i>
                    <span slot="title">首页</span>
                </el-menu-item>
                <el-submenu :index="index+1" v-for="(i,index) in menu_list" :key="i.id">
                    <template slot="title">
                    <i :class="i.control.icon"></i>
                    <span>{{i.control.name}}</span>
                    </template>
                    <el-menu-item-group v-for="k in i.children" :key="k.id">
                        <el-menu-item :index="k.control.path">{{k.control.name}}</el-menu-item>
                    </el-menu-item-group>    
                </el-submenu>
            </el-menu>
        </el-row>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    data() {
        return {
            menu_list:[],
        }
    },
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        }
    },
    created() {
        //页面一加载  就去获取所有的菜单
        let token=sessionStorage.getItem("token")

        if(!token){
            alert("令牌不存在，请先登录")
            this.$router.push("/login/")
            return
        }

        this.axios({
            url:"/menu/",
            method:"GET",
            params:{
                token:token
            }
        }).then(resp=>{
            console.log(resp.data)
            this.menu_list=resp.data
        }).catch(error=>{
            console.log(error)
        })
    }
}
</script>

<style scoped>
.el-menu-vertical-demo{
    height: 700px;
    
}
</style>
